{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="form-inline float-end">
                <button type="submit" form="form" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-light"><i class="fa fa-reply"></i></a>
            </div>
            <h1>{{ heading_title }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
                {% endfor %}
           </ul>
        </div>
    </div>
    <div class="container-fluid">
        {% if error.warning %}
            <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error.warning }}
                <button type="button" class="btn-close float-end" data-bs-dismiss="alert"></button>
            </div>
        {% endif %}
        {% if success %}
            <div class="alert alert-success"><i class="fa fa-exclamation-circle"></i> {{ success }}
                <button type="button" class="btn-close float-end" data-bs-dismiss="alert"></button>
            </div>
        {% endif %}
        <div class="card card-default">
            <div class="card-header">
                <h5 class="panel-title"><i class="fas fa-pencil-alt"></i> {{ text_edit }}</h5>
            </div>
            <div class="card-body">
                {% if setup %}
                    <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true"><span class="fas fa-address-book"></span> {{ text_exel }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false"><span class="fa fa-cog"></span> {{ text_settings }}</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <!-- tab1 start -->
                            <div class="form-group row" id="tab-form">
                                <label class="col-sm-2 col-form-label" for="input-status">
                                    <span data-toggle="tooltip" title="{{ entry_status }}">
                                    {{ entry_status }}
                                    </span>
                                </label>
                                <div class="col-sm-8">
                                    <input type="hidden" value="0" name="{{ codename }}[status]"/>
                                    <input type="checkbox" class="switcher" value="1" name="{{ codename }}_setting[status]" {% if (setting['status']) %}checked="checked"{% endif %} id="input-status" />
                                </div>
                            </div>   

                            <div class="form-group row" id="tab-form">
                                <label class="col-sm-2 col-form-label" for="input-language">{{ entry_language }}</label>
                                <div class="col-sm-10">
                                    <select name="{{ codename }}_setting[language_id]" id="input_language" class="form-select">
                                        {% for language in languages %}
                                            {% if (language['language_id'] == setting['language_id']) %}
                                                <option value="{{ language['language_id'] }}" selected="selected">{{ language['name'] }}</option>
                                            {% else %}
                                                <option value="{{ language['language_id'] }}">{{ language['name'] }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <input accept="application/zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" name="import" style="display: none;" type="file"/>
                            <input name="recipient" type="hidden" value=""/>
                            <table class="table table-bordered table-hover form-group">
                                <thead>
                                    <tr>
                                        <td class="text-left">
                                            {{column_name}}
                                        </td>
                                        <td class="text-left">
                                            {{column_description}}
                                        </td>
                                        <td class="text-center">
                                            {{column_action}}
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for key, module in modules %}
                                        <tr>
                                            <td class="text-left">
                                                {{module.title}}
                                            </td>
                                            <td class="text-left">
                                                {{module.description}}
                                            </td>
                                            <td class="text-center">
                                                <a id="button-export" class="btn btn-success" data-value="{{key}}" data-toggle="modal" data-bs-target="#modal-progress" title="{{button_export}}">
                                                    <i class="fa fa-download"></i>
                                                </a>
                                                <a id="button-import" class="btn btn-primary" data-value="{{key}}" data-toggle="tooltip" title="{{button_import}}">
                                                    <i class="fa fa-upload"></i>
                                                </a>
                                                <a id="button-setting" class="btn btn-info" data-value="{{key}}" data-toggle="tooltip" title="{{button_filter}}">
                                                    <i class="fa fa-filter"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <!-- tab2 end   -->
                            </div>
                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <!-- tab2 start -->
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"><span data-toggle="tooltip" title="{{help_limit}}">{{entry_limit}}</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="{{codename}}_setting[limit]" value="{{setting.limit}}"/>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"><span data-toggle="tooltip" title="{{help_limit_step}}">{{entry_limit_step}}</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="{{codename}}_setting[limit_step]" value="{{setting.limit_step}}"/>
                                    {% if error.limit_step %}
                                        <div class="text-danger">{{error.limit_step}}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"><span data-toggle="tooltip" title="{{help_truncate_table}}">{{entry_truncate_table}}</span></label>
                                <div class="col-sm-10">
                                <input type="hidden" name="{{codename}}_setting[truncate_table]" value="0" />
                                    <input type="checkbox" class="form-control switcher" name="{{codename}}_setting[truncate_table]" {{setting.truncate_table ? 'checked="checked"'}} value="1"/>
                                </div>
                            </div>
                            <!-- tab2 end   -->
                            </div>
                        </div>
                 
                            <ei_setting_modal></ei_setting_modal>    
                            <ei_progress_modal></ei_progress_modal>                   
                                     
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label" for="input_status">{{ entry_ticket }}</label>
                            <div class="col-sm-10">
                                <a class="btn btn-success btn-bg" id="ticket_btn" href="https://dreamvention.ee/support" target="_blank">{{ text_ticket }}</a><br>
                            </div>
                        </div>  
                        <div style="text-align: center; padding: 30px;">{{ text_powered_by }}</div>
                    </form>
                {% else %}                 
                    <div class="welcome">
                        <div class="welcome-into">
                        <div class="welcome-into-logo">
                            <img src= "{{ icon_image }}" />
                        </div>
                        <div class="welcome-into-heading">{{ title_setup }}</div>
                        <div class="welcome-into-text">{{ text_setup }}</div>
                        <div class="welcome-into-start">
                            <a class="btn btn-primary btn-lg setup">Setup</a>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
<div id="modal-progress" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
{% for riot_tag in riot_tags %}
    <script src="{{riot_tag}}" type="riot/tag"></script>
{% endfor %}
<style>
    .form-group{
        margin-top: 30px;
    }
    .welcome{
		background: url("{{ background_image }}");
		background-position: bottom;
		background-repeat: repeat-x;
		background-size: 50%;
		min-height: 700px;
		padding-top: 50px;
		padding-bottom: 125px;
    }
    .welcome-into{
        text-align: center;
        max-width: 500px;
        margin: auto;
    }
    .welcome-into-logo{
        padding-bottom: 15px;
    }
    .welcome-into-heading{
        font-size: 30px;
        font-weight: bold;
        padding-bottom: 15px;
    }
    .welcome-into-text{
        font-size: 18px;
        padding-bottom: 30px;
    }
    .welcome-into-start{
        padding-bottom: 30px;
    }
    .welcome-features{
        padding: 30px;
    }
    .welcome-features-icon{
        padding: 20px;
        height: 130px;
        text-align: center;
    }
    .welcome-features-text{
        text-align: center;
        font-weight: bold;
        font-size: 16px;
    }
</style>
<script>
    $(document).on('click', '.setup', function () {
        window.location.href = '{{ setup_link }}';
    })

    $('.switcher[type=checkbox]').bootstrapSwitch({
            'onColor': 'success',
            'onText': '{{text_yes}}',
            'offText': '{{text_no}}'
    });

    riot.mixin({store: d_export_import.createStore({{ json }})});
    riot.mount('*');
    $(document).ready(function () {
        $(document).on('click', 'a#button-export', function () {
            d_export_import.updateState({mode: 'export', source: $(this).data('value')});
            d_export_import.initStart();
            d_export_import.export();
            var myModal = new bootstrap.Modal(document.getElementById('modal-progress'), {
               keyboard: false
            });
            myModal.show();  
        });
        $(document).on('click', 'a#button-import', function () {
            $('input[name=recipient]').val($(this).data('value'));
            $('input[type=file][name=import]').val('');
            $('input[type=file][name=import]').click();
        });
        $(document).on('click', 'a#button-setting', function () {
            d_export_import.updateState({'filter_active': $(this).data('value')});
            var myModal = new bootstrap.Modal(document.getElementById('modal-setting'), {
               keyboard: false
            });  
             myModal.show();  
        });
        $("input:file").change(function () {
            d_export_import.updateState({mode: 'import', source: $(this).data('value')});
            d_export_import.initStart();
            d_export_import.import ();
            var myModal = new bootstrap.Modal(document.getElementById('modal-progress'), {
               keyboard: false
            });  
             myModal.show();  
        });
    });
</script>
{{footer}}